<script setup>
import { ref, onMounted, watch } from 'vue'
import { useAuth } from './composables/useAuth.js'
import { useUIState } from './composables/useUIState.js'
import { useDataStore } from './composables/useDataStore.js'
import { useFormManager } from './composables/useFormManager.js'
import { useRelationManager } from './composables/useRelationManager.js'
import { useFileUpload } from './composables/useFileUpload.js'
import { useApi } from './composables/useApi.js'
import { useBusinessLogic } from './composables/useBusinessLogic.js'
import { useContentEditor } from './composables/useContentEditor.js'
import { useRelationOperations } from './composables/useRelationOperations.js'
import LoginPage from './components/LoginPage.vue'
import QuillEditorDemo from './components/QuillEditorDemo.vue'

import AdminSidebar from './components/AdminSidebar.vue'
import HierarchyManagement from './components/HierarchyManagement.vue'
import PageManagement from './components/PageManagement.vue'
import CategoryManagement from './components/CategoryManagement.vue'
import ItemManagement from './components/ItemManagement.vue'
import PageForm from './components/PageForm.vue'
import CategoryForm from './components/CategoryForm.vue'
import ItemForm from './components/ItemForm.vue'
import UnifiedMarkdownEditor from './components/UnifiedMarkdownEditor.vue'

import {
  Document,
  Plus,
  Close,
  ArrowLeft,
  Edit,
  Check
} from '@element-plus/icons-vue'

// 表单引用
const pageFormRef = ref(null)
const categoryFormRef = ref(null)
const itemFormRef = ref(null)

// 使用认证管理composable
const {
  isLoggedIn,
  userInfo,
  checkLoginStatus,
  handleLoginSuccess,
  handleLogout
} = useAuth()

// 使用UI状态管理composable
const {
  activeTab,

  showContentViewDialog,
  currentViewItem,
  showContentEditor,
  showMarkdownEditor,
  currentEditItem,
  showCategoryItemDialog,
  currentCategory,
  iconPreviewUrl,
  openContentViewDialog,
  closeContentViewDialog,
  closeMarkdownEditor,
  closeCategoryItemDialog
} = useUIState()

// 使用API管理composable
const {
} = useApi()

// 使用数据管理composable
const {
  // 数据状态
  categories,
  items,
  pages,
  hierarchyData,

  
  // 加载状态
  loading,

  
  // 数据获取方法
  fetchCategories,
  fetchHierarchyData,
  fetchAllData,

  
  // 数据操作方法
  saveCategory,
  removeCategory,
  saveItem,
  removeItem,
  savePage,
  removePage,
  
  // 层级管理
  togglePageExpansion,
  toggleCategoryExpansion,
  toggleItemExpansion,
  
  // 关系管理
  manageCategoryPageRelation,
  manageItemCategoryRelation
} = useDataStore()

// 使用关系管理composable
const {
  // 选择状态
  selectedPageId,
  selectedCategoryId,
  selectedCategoryIdForItem,
  selectedItemId,
  selectedItemToAdd,
  selectedItemToRelate,
  selectedCategoryToRelate,
  
  // 关系数据
  currentPageCategories,
  currentCategoryItems,
  availableItemsForCategory,
  currentItemCategories,
  availableCategoriesForItem,
  currentRelatedItems,
  
  // 临时关联关系
  tempCategoryRelations,
  tempItemRelations,
  
  // 方法
  updateCurrentCategoryItems,
  fetchCurrentItemCategories,
  updateCurrentItemCategories,
  updateAvailableCategoriesForItem,
  addCategoryToItem,
  removeCategoryFromItem,
  getTempRelatedCategoriesForItem,
  clearTempRelations,
  resetSelections
} = useRelationManager()

// 使用文件上传composable
const {
  // 状态
  uploading,
  uploadProgress,
  iconUploadRef,
  
  // 方法
  handleIconFileSelect,
  clearIconPreview,
  saveItemWithFile,
  uploadSingleFile,
  uploadMultipleFiles,
  resetUploadState
} = useFileUpload()

// 使用表单管理composable
const {
  // 表单显示状态
  showCategoryForm,
  showItemForm,
  showPageForm,
  
  // 表单数据
  categoryForm,
  itemForm,
  pageForm,
  
  // 验证规则

  
  // 表单操作方法
  openCategoryForm,
  openItemForm,
  openPageForm,
  closeCategoryForm,
  closeItemForm,
  closePageForm,
  
  // 表单验证
  validateCategoryForm,
  validateItemForm,
  validatePageForm,
  
  // 获取表单数据
  getCategoryFormData,
  getItemFormData,
  getPageFormData,
  
  // 编辑状态检查
  isEditingCategory,
  isEditingItem,
  isEditingPage
} = useFormManager()

// 使用业务逻辑composable
const businessLogic = useBusinessLogic({
  // 表单管理
  categoryFormRef,
  itemFormRef,
  pageFormRef,
  validateCategoryForm,
  validateItemForm,
  validatePageForm,
  getCategoryFormData,
  getItemFormData,
  getPageFormData,
  isEditingCategory,
  isEditingItem,
  isEditingPage,
  closeCategoryForm,
  closeItemForm,
  closePageForm,
  
  // 数据操作
  saveCategory,
  saveItem,
  savePage,
  removeCategory,
  removeItem,
  removePage,
  fetchAllData,
  fetchCategories,
  fetchHierarchyData,
  
  // 关系管理
  tempCategoryRelations,
  tempItemRelations,
  clearTempRelations,
  
  // 文件上传
  saveItemWithFile,
  manageItemCategoryRelation
})

// 使用内容编辑composable
const contentEditor = useContentEditor({
  // UI状态
  showContentViewDialog,
  showContentEditor,
  showMarkdownEditor,
  currentViewItem,
  currentEditItem,
  openContentViewDialog,
  closeContentViewDialog,
  
  // 表单状态
  itemForm,
  closeItemForm,
  
  // 数据操作
  saveItem,
  fetchAllData
})

// 使用关系操作composable
const relationOperations = useRelationOperations({
  
  // 数据操作方法
  manageCategoryPageRelation,
  manageItemCategoryRelation,
  
  // 数据更新方法
  fetchCategories,
  fetchHierarchyData
})

// 从composables中解构方法
const {
  handleSaveCategory,
  handleSaveItem,
  handleCloseItemForm,
  editCategory,
  editItem,
  editPage,
  deleteCategory,
  deleteItem,
  deletePage
} = businessLogic

const {

  openContentEditor,
  closeContentEditor,
  saveItemContent,
  editMarkdownContent,
  editRichTextContent,
  handleQuillSaveContent,
  handleQuillCancelEdit
} = contentEditor

const {
  addItemRelation,
  removeItemRelation,
  removePageCategoryRelationById,
  removeCategoryItemRelationById,
  removePageItemRelation
} = relationOperations



// 从项目列表打开Markdown编辑器
const editItemMarkdown = (item) => {
  currentEditItem.value = { ...item }
  showMarkdownEditor.value = true
}
/**
 * 从项目列表打开富文本编辑器
 * @param {Object} item - 要编辑的项目对象
 */
const editItemRichText = (item) => {
  console.log('editItemRichText - 接收到的项目数据:', item)
  
  // 设置当前编辑项目数据
  currentEditItem.value = { ...item }
  
  // 跳转到 Quill 编辑器页面
  activeTab.value = 'quill-editor'
  
  // 确保其他编辑器状态为关闭
  showMarkdownEditor.value = false
  
  console.log('editItemRichText - 已跳转到 Quill 编辑器，当前编辑项目:', currentEditItem.value)
}

/**
 * 处理图标文件变化
 * @param {File} file - 图标文件
 */
const handleIconChange = (file) => {
  handleIconFileSelect(file, itemForm)
}

/**
 * 移除图标
 */
const removeIcon = () => {
  clearIconPreview(itemForm)
}

/**
 * 处理页面保存（来自PageManagement组件）
 * @param {Object} pageData - 页面数据
 * @param {boolean} isEdit - 是否为编辑模式
 */
const handleSavePageFromManagement = async (pageData, isEdit) => {
  console.log('🚨🚨🚨🚨🚨🚨🚨 App.vue - handleSavePageFromManagement 被调用！！！ 🚨🚨🚨🚨🚨🚨🚨')
  console.log('🚨🚨🚨🚨🚨 这是 App.vue 中的全局 PageForm 事件处理函数！！！ 🚨🚨🚨🚨🚨')
  console.log('🔍 App.vue - pageData:', pageData)
  console.log('🔍 App.vue - isEdit:', isEdit)
  console.log('🔍 App.vue - 当前时间:', new Date().toLocaleTimeString())
  console.log('🔍 App.vue - showPageForm 状态:', showPageForm.value)
  console.log('🔍 App.vue - 即将调用 savePage 函数')
  
  try {
    await savePage(pageData, isEdit)
    console.log('✅ App.vue - savePage 调用完成')
  } catch (error) {
    console.error('❌ App.vue - savePage 调用失败:', error)
    ElMessage.error('页面保存失败')
  }
  
  console.log('🚨🚨🚨🚨🚨🚨🚨 App.vue - handleSavePageFromManagement 执行完毕！！！ 🚨🚨🚨🚨🚨🚨🚨')
}

/**
 * 添加分类到页面
 * @param {Object} relationData - 关系数据 {pageId, categoryId}
 */
const addCategoryToPage = async (relationData) => {
  console.log('🔍 App.vue - addCategoryToPage 被调用:', relationData)
  
  try {
    // 这里可以调用 API 添加分类关系
    // await addCategoryToItem(relationData.pageId, relationData.categoryId)
    console.log('✅ App.vue - 分类关系添加成功')
    ElMessage.success('分类关系添加成功')
    
    // 刷新数据
    await fetchPages()
  } catch (error) {
    console.error('❌ App.vue - 添加分类关系失败:', error)
    ElMessage.error('添加分类关系失败')
  }
}

/**
 * 从页面移除分类
 * @param {Object} relationData - 关系数据 {pageId, categoryId}
 */
const removeCategoryFromPage = async (relationData) => {
  console.log('🔍 App.vue - removeCategoryFromPage 被调用:', relationData)
  
  try {
    // 这里可以调用 API 移除分类关系
    // await removeCategoryFromItem(relationData.pageId, relationData.categoryId)
    console.log('✅ App.vue - 分类关系移除成功')
    ElMessage.success('分类关系移除成功')
    
    // 刷新数据
    await fetchPages()
  } catch (error) {
    console.error('❌ App.vue - 移除分类关系失败:', error)
    ElMessage.error('移除分类关系失败')
  }
}

// 菜单选择处理
const handleMenuSelect = (key) => {
  activeTab.value = key
  if (key === 'hierarchy') {
    fetchHierarchyData()
  }
}

// 组件挂载时初始化数据
onMounted(async () => {
  console.log('🚀 App.vue - onMounted 开始')
  // 临时设置测试token（仅用于调试）
  if (!localStorage.getItem('token')) {
    localStorage.setItem('token', 'test-token')
    localStorage.setItem('userInfo', JSON.stringify({ username: 'test', name: '测试用户' }))
  }
  
  // 检查登录状态
  await checkLoginStatus()
  
  // 如果已登录，则获取数据
  if (isLoggedIn.value) {
    console.log('🔍 App.vue - 用户已登录，开始获取数据')
    console.log('📊 App.vue - fetchAllData 调用前 categories 长度:', categories.value.length)
    await fetchAllData()
    console.log('✅ App.vue - fetchAllData 完成，categories 长度:', categories.value.length)
    console.log('📊 App.vue - categories 数据:', categories.value.slice(0, 2))
  }
})
</script>

<template>
  <!-- 根据登录状态显示登录页面或管理界面 -->
  <LoginPage v-if="!isLoggedIn" @login-success="handleLoginSuccess" />

  <div v-else class="admin-container">
    <el-container class="layout-container">
      <!-- 侧边栏 -->
      <AdminSidebar 
        :active-tab="activeTab" 
        :user-info="userInfo" 
        @menu-select="handleMenuSelect" 
        @logout="handleLogout" 
      />

      <!-- 主要内容区域 -->
      <el-main class="main-content">
        <!-- 全局加载状态 -->
        <div v-if="loading.global" class="loading-container" v-loading="true" element-loading-text="加载中...">
        </div>
        
        <!-- Markdown编辑页面 -->
        <div v-if="showMarkdownEditor" class="markdown-editor-page">
          <div class="page-header">
            <h1>编辑Markdown内容</h1>
            <div class="header-actions">
              <el-button type="default" @click="closeMarkdownEditor">
                <el-icon><ArrowLeft /></el-icon>
                返回
              </el-button>
              <el-button type="primary" @click="saveMarkdownContent">
                <el-icon><Check /></el-icon>
                保存
              </el-button>
            </div>
          </div>
          
          <div class="markdown-editor-container">
            <div class="editor-info">
              <h3>{{ currentEditItem?.name }}</h3>
              <p v-if="currentEditItem?.description">{{ currentEditItem.description }}</p>
            </div>
            
            <UnifiedMarkdownEditor
              v-if="currentEditItem"
              v-model="currentEditItem.content"
              :height="600"
              @save="saveCurrentEditItem"
            />
          </div>
        </div>
        

        
        <!-- 层级管理 -->
        <HierarchyManagement 
          v-if="!showMarkdownEditor && activeTab === 'hierarchy'"
          :hierarchy-data="hierarchyData"
          @open-page-form="openPageForm"
          @open-category-form="openCategoryForm"
          @open-item-form="openItemForm"
          @refresh-data="fetchHierarchyData"
          @edit-page="editPage"
          @delete-page="deletePage"
          @edit-category="editCategory"
          @delete-category="deleteCategory"
          @edit-item="editItem"
          @delete-item="deleteItem"
          @remove-page-category-relation="removePageCategoryRelationById"
          @remove-category-item-relation="removeCategoryItemRelationById"
          @remove-page-item-relation="removePageItemRelation"
          @toggle-page-expansion="togglePageExpansion"
          @toggle-category-expansion="toggleCategoryExpansion"
          @toggle-item-expansion="toggleItemExpansion"
        />

        <!-- 页面管理 -->
        <PageManagement 
          v-if="!showMarkdownEditor && activeTab === 'pages'"
          :pages="pages"
          :categories="categories"
          @open-page-form="openPageForm"
          @edit-page="editPage"
          @delete-page="deletePage"
          @save-page="handleSavePageFromManagement"
          @add-category-relation="addCategoryToPage"
          @remove-category-relation="removeCategoryFromPage"
        />

        <!-- 分类管理 -->
        <CategoryManagement 
          v-if="!showMarkdownEditor && activeTab === 'categories'"
          :categories="categories"
          @open-category-form="openCategoryForm"
          @edit-category="editCategory"
          @delete-category="deleteCategory"
        />

        <!-- 项目管理 -->
        <ItemManagement 
          v-if="!showMarkdownEditor && activeTab === 'items'"
          :items="items"
          @open-item-form="openItemForm"
          @edit-item="editItem"
          @delete-item="deleteItem"
          @edit-item-markdown="editItemMarkdown"
          @edit-item-rich-text="editItemRichText"
        />



        <!-- Quill 编辑器 -->
        <div v-else-if="!showMarkdownEditor && activeTab === 'quill-editor'">
          <QuillEditorDemo 
            :currentEditItem="currentEditItem"
            @save-content="handleQuillSaveContent"
            @cancel-edit="handleQuillCancelEdit"
          />
        </div>




      </el-main>
    </el-container>

    <!-- 页面表单弹窗 -->
    <PageForm 
      v-model:visible="showPageForm"
      :form-data="pageForm"
      :is-edit="isEditingPage"
      :all-categories="categories"
      @save="handleSavePageFromManagement"
      @cancel="closePageForm"
      @add-category-relation="addCategoryToPage"
      @remove-category-relation="removeCategoryFromPage"
    />

    <!-- 分类表单弹窗 -->
    <CategoryForm 
      v-model="showCategoryForm"
      :category-form="categoryForm"
      :is-editing="isEditingCategory"
      :items="items"
      :current-category-items="currentCategoryItems"
      :selected-item-for-category="selectedItemForCategory"
      :get-temp-related-items="getTempRelatedItems"
      @save="handleSaveCategory"
      @cancel="closeCategoryForm"
      @add-item="addItemToCategory"
      @remove-item="removeItemFromCategory"
      @update:selected-item-for-category="selectedItemForCategory = $event"
    />

    <!-- 项目表单弹窗 -->
    <ItemForm 
      v-model="showItemForm"
      :item-form="itemForm"
      :is-editing="isEditingItem"
      :categories="categories"
      :items="items"
      :current-item-categories="currentItemCategories"
      :current-related-items="currentRelatedItems"
      :available-categories-to-relate="availableCategoriesToRelate"
      :available-items-to-relate="availableItemsToRelate"
      :selected-category-to-relate="selectedCategoryToRelate"
      :selected-item-to-relate="selectedItemToRelate"
      :icon-preview-url="iconPreviewUrl"
      @save="handleSaveItem"
      @cancel="handleCloseItemForm"
      @edit-markdown="editMarkdownContent"
      @edit-rich-text="editRichTextContent"
      @add-category="addCategoryToItem"
      @remove-category="removeCategoryFromItem"
      @add-item-relation="addItemRelation"
      @remove-item-relation="removeItemRelation"
      @icon-change="handleIconChange"
      @remove-icon="removeIcon"
      @update:selected-category-to-relate="selectedCategoryToRelate = $event"
      @update:selected-item-to-relate="selectedItemToRelate = $event"
    />
     
     <!-- 分类项目关系管理对话框 -->
     <el-dialog
       v-model="showCategoryItemDialog"
       :title="`管理 ${currentCategory?.name} 的项目关系`"
       width="700px"
       :close-on-click-modal="false"
     >
       <div class="category-item-management">
         <!-- 添加项目区域 -->
         <div class="add-item-section">
           <h4>添加项目</h4>
           <el-row :gutter="16">
             <el-col :span="16">
               <el-select 
                 v-model="selectedItemToAdd" 
                 placeholder="选择要添加的项目" 
                 style="width: 100%"
                 filterable
               >
                 <el-option
                   v-for="item in availableItemsForCategory"
                   :key="item.id"
                   :label="item.name"
                   :value="item.id"
                 />
               </el-select>
             </el-col>
             <el-col :span="8">
               <el-button 
                 type="primary" 
                 @click="addItemToCurrentCategory"
                 :disabled="!selectedItemToAdd"
                 :loading="loading.relation"
               >
                 <el-icon><Plus /></el-icon>
                 添加项目
               </el-button>
             </el-col>
           </el-row>
         </div>
         
         <!-- 当前项目列表 -->
         <div class="current-items-section">
           <h4>当前项目列表</h4>
           <div v-if="currentCategoryItems.length > 0" class="items-list">
             <div 
               v-for="item in currentCategoryItems" 
               :key="item.id" 
               class="item-item-row"
             >
               <div class="item-info">
                 <div class="item-icon-display">
                   <img 
                     v-if="item.icon" 
                     :src="item.icon" 
                     :alt="item.name"
                     class="relation-item-icon"
                   />
                   <el-icon v-else class="relation-default-icon">
                     <Document />
                   </el-icon>
                 </div>
                 <span class="item-name">{{ item.name }}</span>
                 <el-tag type="info" size="small">{{ item.content_type || '未知类型' }}</el-tag>
                 <el-tag type="success" size="small">{{ item.description || '无描述' }}</el-tag>
               </div>
               <div class="item-actions">
                 <el-button 
                   size="small" 
                   type="warning" 
                   @click="removeItemFromCurrentCategory(item.id)"
                   :loading="loading.relation"
                 >
                   <el-icon><Close /></el-icon>
                   移除
                 </el-button>
               </div>
             </div>
           </div>
           <div v-else class="no-items">
             <el-empty description="暂无关联项目" />
           </div>
         </div>
       </div>
       
       <template #footer>
         <span class="dialog-footer">
           <el-button type="default" @click="closeCategoryItemDialog">关闭</el-button>
         </span>
       </template>
     </el-dialog>

     <!-- 内容查看对话框 -->
     <el-dialog
       v-model="showContentViewDialog"
       :title="`查看内容 - ${currentViewItem?.name}`"
       width="80%"
       :close-on-click-modal="false"
       class="content-view-dialog"
     >
       <div v-if="!showContentEditor" class="content-view-container">
         <div class="content-header">
           <div class="header-left">
             <h3>{{ currentViewItem?.name }}</h3>
             <p class="content-description">{{ currentViewItem?.description }}</p>
             <div class="content-meta">
               <el-tag type="info">{{ currentViewItem?.content_type }}</el-tag>
               <el-tag :type="currentViewItem?.status ? 'success' : 'danger'">
                 {{ currentViewItem?.status ? '启用' : '禁用' }}
               </el-tag>
             </div>
           </div>
           <div class="header-right">
             <el-button type="primary" @click="openContentEditor">
               <el-icon><Edit /></el-icon>
               编辑
             </el-button>
           </div>
         </div>
         
         <div class="content-display">
           <h4>文本内容</h4>
           <div class="content-text">
             <pre class="text-content">{{ currentViewItem?.content || '暂无内容' }}</pre>
           </div>
         </div>
       </div>
       
       <!-- 编辑器页面 -->
       <div v-else class="content-editor-container">
         <div class="editor-header">
           <h3>编辑内容 - {{ currentViewItem?.name }}</h3>
           <div class="editor-actions">
             <el-button @click="closeContentEditor">取消</el-button>
             <el-button type="primary" @click="saveItemContent">
               <el-icon><Check /></el-icon>
               保存
             </el-button>
           </div>
         </div>
         
         <div class="editor-content">
           <UnifiedMarkdownEditor
             v-model="currentViewItem.content"
             :height="600"
             @save="saveItemContent"
           />
         </div>
       </div>
       
       <template #footer>
         <span class="dialog-footer">
           <el-button type="default" @click="closeContentViewDialog">关闭</el-button>
         </span>
       </template>
     </el-dialog>
   </div>
</template>

<style scoped>
/* 组件特定样式 */

.markdown-editor-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.editor-info {
  margin-bottom: 15px;
}

.editor-info h3 {
  margin: 0 0 5px 0;
  color: #333;
}

.editor-info p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

/* 内容查看对话框 */
.content-view-dialog .el-dialog__body {
  padding: 0;
}

.content-view-container {
  padding: 20px;
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e0e0e0;
}

.header-left h3 {
  margin: 0 0 8px 0;
  color: #333;
  font-size: 20px;
}

.content-description {
  margin: 0 0 10px 0;
  color: #666;
  font-size: 14px;
}

.content-meta {
  display: flex;
  gap: 8px;
}

.content-display {
  margin-top: 20px;
}

.content-display h4 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 16px;
}

.content-text {
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 4px;
  padding: 15px;
}

.text-content {
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.5;
}

/* 内容编辑器 */
.content-editor-container {
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e0e0e0;
}

.editor-header h3 {
  margin: 0;
  color: #333;
  font-size: 18px;
}

.editor-actions {
  display: flex;
  gap: 10px;
}

.editor-content {
  flex: 1;
}

/* 分类项目管理对话框 */
.category-item-management {
  padding: 20px;
}

.add-item-section {
  margin-bottom: 30px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.add-item-section h4 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 16px;
  font-weight: 600;
}

.current-items-section h4 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 16px;
  font-weight: 600;
}

.items-list {
  border: 1px solid #e9ecef;
  border-radius: 8px;
  overflow: hidden;
}

.item-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #e9ecef;
  background-color: #fff;
  transition: background-color 0.2s;
}

.item-item-row:last-child {
  border-bottom: none;
}

.item-item-row:hover {
  background-color: #f8f9fa;
}

.item-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.item-icon-display {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background-color: #f0f0f0;
}

.relation-item-icon {
  width: 24px;
  height: 24px;
  object-fit: cover;
  border-radius: 4px;
}

.relation-default-icon {
  font-size: 18px;
  color: #999;
}

.item-name {
  font-weight: 500;
  color: #333;
  margin-right: 10px;
}

.item-actions {
  display: flex;
  gap: 8px;
}

.no-items {
  padding: 40px;
  text-align: center;
}

/* 对话框底部 */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>
